<!--
顶部栏
props:
title: 标题
is_back： 点击左边是否返回，默认是
emit：
left： 点击了左边
right：点击了右边
-->
<template>
  <div class="container">
      <div class="left">
            <slot name="left">
            <i class="fa fa-angle-left fl" aria-hidden="true" @click="left()"><span>返回</span></i>
            </slot>
            </div>
            <div class="right">
            <slot name="right">
            <i class="fa fa-ellipsis-h fr" aria-hidden="true" @click="right()"></i>
            </slot>
            </div>
            <p>
{{title}}
            </p>
</div>
</template>
<style lang="less" scoped>
@import url('./theme.less');
.container{
    width: 100%;
    height: @header-height;
    background: @header-background-color;
    color: @header-font-color;
    position: fixed;
    left: 0;
    top: 0;
    text-align: center;
    line-height: @header-height;
    font-size: @header-font-size;
    i{
        line-height: @header-height;
        font-size: @header-font-size;
        color: @header-font-color;
        span{
            padding:0 10px;
            font-weight: normal;
        }
    }
    .fl{
        position: absolute;
        left: 10px;
        top: 0;
    }
    .fr{
        position: absolute;
        right: 10px;
        top: 0;
    }
}
</style>

<script>
export default {
   props:{
       title:{
           default: '顶部栏'
       },
       is_back:{
           default: true
       }
   },
   methods:{
       left:function(){
           this.$emit('left');
           if(this.is_back){
               this.$router.go(-1)
           }
       },
       right:function(){
           this.$emit('right');
       }
   }
}
</script>
